<template>
  <div class="main">
		<van-nav-bar  title="邀请技师" left-arrow @click-left="$utils.back($route.path)" />
		<div class="sharemain">
			<div class="sharetitle"><img src="@/assets/images/physio/share.png" /></div>
			<div class="join"><img src="@/assets/images/physio/join.png" /></div>
			<div class="codetop"></div>
			<div class="qrcode">
				<div v-show="!replaceImg" ref="imgContent" class="share-dialog">
					<div ref="qrCode" class="qr-code" >
						<div class="share-img-box">
							<img v-show="replaceImg" :src="replaceImg">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="share" @click="showInviteImg">分享链接</div>-->
		<!--<van-popup v-model="showTips" :overlay="overlay">
			<div  class="limit">
				<div>您没有权限邀请技师</div>
				<div>请联系服务商</div>
			</div>
		</van-popup>-->
	</div>
</template>
<script>
import { GetUserStore } from 'api/store'
import QRCode from 'qrcodejs2'
import shareimg from 'assets/images/sharelogo.jpg'
import { GetInvitDealerConfigData, AddInvitDealer } from 'api/store'
export default { 
	data(){
		return {
			url: '',
			replaceImg: '',
			showTips: false,
			overlay: false,	
			shareData: {
        show: false,
        showConfirmButton: false
      },		
      requestParams: {},
      requestData: {},
			invitStoreId: ''
		}
	},
	watch: {
    changeImg(newVal, oldVal) {
      console.log('gaibian')
      if (newVal) {
        this.GetUserStore()
        this.replaceToImg()
      }
    }
  },
	created(){
		this.GetUserStore()		
    this.GetInvitDealerConfigData()
	},
	mounted() {
    this.GetInvitDealerConfigData()
  },
	methods:{
		GetUserStore(){
			GetUserStore().then(res => {
				if(res.Data){
					this.invitStoreId = res.Data.ID
					this.url = this.$LocalDomain +  "/circle/#/physioapplyTechnician?InvitStoreId=" +  res.Data.ID
					this.creatQrCode(this.url)
				}else{
					this.showTips = true
				}
			})
		},
		creatQrCode(url) {
			console.log(this.$LocalDomain,this.url,"url")
      this.$refs.qrCode.innerHTML = ''
      var qrcode = new QRCode(this.$refs.qrCode, {
        text: url, // 需要转换为二维码的内容
        width: 185,
        height: 185,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
		replaceToImg() {
      setTimeout(() => {
        html2canvas(this.$refs.imgContent, {
          backgroundColor: null,
          allowTaint: false,
          logging: false, // 日志开关，便于查看html2canvas的内部执行流程
          width: 200, // dom 原始宽度
          height: 200,
          scrollY: 0,
          scrollX: 0,
          scale: window.devicePixelRatio,
          useCORS: true // 图片跨域
        }).then((canvas) => {
          const url = canvas.toDataURL('image/png')
          this.replaceImg = url
          this.$forceUpdate()
        })
      }, 200)
    },
	
		showInviteImg(data) {
      const that = this
      //that.inviteInfo.GradeName = data.Name
      //that.requestData.dealerGradeId = data.ID
      that.requestData.validStartTime = new Date()
      that.requestData.validEndTime = new Date(new Date().valueOf() + that.microInfo.InvitValidTime * 60 * 60 * 1000)
      that.AddInvitDealer(that.requestParams, that.requestData)
    },
    GetInvitDealerConfigData() {
      const that = this
      GetInvitDealerConfigData().then(res => {
				console.log(res,"分享1")
        if (res && res.Data) {
          that.gradeList = res.Data.GradeList
          that.microInfo = res.Data.MicroInfo
          that.storeInfo = res.Data.StoreInfo

          // 邀请人信息
          //that.inviteInfo.Face = that.storeInfo.Face

          // 产品线
          //that.requestData.lineIds = ''
          //if (res.Data.ProductLines && res.Data.ProductLines.length > 0) {
          //  res.Data.ProductLines.forEach(item => {
          //    that.requestData.lineIds += item.ID + ','
          //  })
          //}
          // 分享标题和内容
          let name = ''
          if (that.storeInfo.V_RealName) {
            name = that.storeInfo.V_RealName
          } else if (that.storeInfo.V_NickName) {
            name = that.storeInfo.V_NickName
          } else if (that.storeInfo.ContactName) {
            name = that.storeInfo.ContactName
          }
					 else if (that.storeInfo.Name) {
            name = that.storeInfo.Name
          }
          //that.inviteInfo.Name = name
          if (that.microInfo.WxShareTitle) {
            that.requestParams.WxShareTitle = that.microInfo.WxShareTitle.replace('[昵称]', name)
          }
          if (that.microInfo.WxShareContent) {
            that.requestParams.WxShareContent = that.microInfo.WxShareContent.replace('[昵称]', name)
          }
					this.showInviteImg()
        }
      })
    },
	

    AddInvitDealer(params, data) {
      const that = this
      AddInvitDealer(params, data).then(res => {			
        if (res && res.Data) {
          that.qrPageUrl = 'data:image/png;base64,' + res.Data.QrPageUrl
          let link = that.$LocalDomain + '/circle/#/physioapplyTechnician?InvitStoreId=' + this.invitStoreId
          const imgUrl = that.$LocalDomain +'/'+ shareimg
          const _obj = {
            title: that.requestParams.WxShareTitle, // 分享标题
            desc: that.requestParams.WxShareContent, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl
          }
					console.log(res.Data.QrPageUrl,'分享2')
          //this.$utils.updateAppMessageShareData(_obj)
          //this.$utils.updateTimelineShareData(_obj)
					wx.miniProgram.postMessage({
            data: {
                msg: {
                    url: link,
                    title: that.requestParams.WxShareTitle,
										desc: that.requestParams.WxShareContent,
                    imgUrl: '',
                }
            }
        	});
          this.$forceUpdate()
          that.shareData.show = true
        }
      })
    }
	}
}
</script>
<style lang="scss" scoped>
	.sharemain{
		background-image: url(../../assets/images/physio/sharebg.png);
		width: 750px;
		height: 100vh;
		background: #24C373;
	}
	.sharetitle{
		padding: 130px 134px 20px 136px;
	}
	.join{
		padding: 0 58px 44px 68px;
	}
	.codetop{
		width: 686px;
		height: 54px;
		background: #008E47;
		border-radius: 34px;
		border: 20px solid #33E28A;
		margin: 0px 16px;
	}
	.qrcode{
		width: 606px;
		height: 628px;
		background: #E2FFF0;
		box-shadow: 0px 4px 10px 0px rgba(28,16,89,0.1);
		border-radius: 0px 0px 24px 24px;
		padding: 90px 80px;
		margin-top: -20px;
		margin-left: 60px;
	}
	.qr-code{
		width: 448px;
		height: 448px;
		border-radius: 40px;
		border: 10px solid #24C373;
		padding: 20px;
		background: #fff;
	}
	.limit{
		width: 398px;
		height: 160px;
		background: #4C4C4C;
		border-radius: 24px;
		font-size: 30px;
		color: rgba(255,255,255,0.9);
		padding: 34px 46px;
		text-align: center;
	}
	.share{
		width: 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
</style>
